<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue的简单介绍</title>
</head>
<body>
	<!-- 条件渲染v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别 -->
	<div id="app">
		<!-- 1.Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析
			数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 -->
		{{message}}
		<!-- 2.Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令 -->
		<img v-bind:src="photo" v-if="flag">
		<img :src="photo2" v-else>
		<input type="button" value="切换" @Click="show">
		
		<!-- 3.v-model 作用于表单元素 内置的数据双向绑定 实现动态关联效果  T-->
		<input type="text" name="mname" id="mname" v-model="mname">
	</div>
	
	<!-- 引入Vue.js -->
	<script type="text/javascript" src="js/vue/vue.js"></script>
	<script type="text/javascript">
		// 构建Vue的实例 MVVM视图和数据的双向绑定
		let app = new Vue({
			el: "#app",   // 绑定界面元素ID
			data: {   // 界面渲染的数据集
				message: '今天是星期三',
				photo: 'images/user.png',
				photo2: 'images/yc.png',
				
				flag: true,    // 隐藏 | 显示
				mname: "张三",
			},
			
			// 在`methods` 对象中定义方法
			methods: {
				show: function(event){
					// `this`在方法里面指向当前Vue实例
					console.log(this.flag + "--" + this.message + "--" + this.mname);
					// 改变data数据集
					this.flag = !this.flag;
					this.message = '2022-07-13';
				}
			}
		})
	
	
	</script>
</body>
</html>